<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DOM查询(操作css样式)</title>
        <script type="text/javascript">
            /***************************************************************
            获取当前显示样式的兼容性问题：
                定义一个函数用于获取元素的当前样式
                参数：obj（要获取的元素），name（要获取的样式名） 
                注意：if条件句里的getComputedStyle，
                     如果不带window是变量，则会从函数作用域一直找到全局作用域，
                     而在IE8中是没有该变量的，所以同样会报错；
                     而带上window就变成了window的属性，如果属性未找到，
                     只会返回undefined，而不会报错;
            *****************************************************************/
            function getStyle(obj, name){
                if(window.getComputedStyle)
                    //正常浏览器的方式(具有getComputedStyle方法)
                    return getComputedStyle(obj,null)[name];
                else    
                    //IE8的方式（没有getComputedStyle方法）
                    return obj.currentStyle[name];
            }


            window.onload = function(){
                /* 
                1.获取内联样式：元素.style.样式名 （可修改）
                  通过style属性修改的样式为内联样式，因其有较高的优先级，
                  所以通过js修改的样式往往会立即执行；
                  注意：通过style读取和修改的只是内联样式，并不能读取修改样式表中的样式
                */
                var box1 = document.getElementById("box1");
                var box4 = document.getElementById("box4");
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                //修改元素的样式：元素.style.样式名 = 样式值;
                   box1.style.width = "300px";
                    //如果css样式名含有-(如background-color)，需要修改为驼峰命名法；
                   box1.style.backgroundColor = "green";
                //读取元素的样式: 元素.style.样式名,
                    alert(box1.style.width);        
                };

                /*
                2.获取当前显示的样式（只读）：
                    方法一：元素.currentStyle.样式名(只支持IE) 
                           如果当前元素未设置该样式，则获取其默认值；
                    方法二：getComputedStyle(): (支持其他浏览器和IE9及以上)
                           这个是window的方法，可直接使用；
                           需两个参数：(1)要获取样式的元素；(2)伪元素，一般都传null；       
                           该方法返回一个对象，该对象封装了当前元素对应的样式；
                           如果获取的样式未设置，则会获取真实的值，而不是默认值(如obj.width)
                    注意： 通过这两种方式获取的样式都是只读的，无法修改，
                           如果修改必须通过 元素.style.样式名 = 样式值 的方式；
                */
                var btn02 = document.getElementById("btn02");
                btn02.onclick = function(){
                    var obj = getComputedStyle(box1,null);
                    alert(obj.width);   
                    alert(obj.backgroundColor);

                    var w = getStyle(box1, "width");
                    alert(w);
                };

                var btn03 = document.getElementById("btn03");
                btn03.onclick = function(){
                /*
                3.元素.clientWidth（只读） 和 元素.clientHeight（只读）: 
                    获取元素的可见宽度和高度(包括内容区和内边距，不包括边框)
                    (注意：只是获取数值，不带单位px)         
                */
                    console.log(box1.clientWidth);  //520
                    console.log(box1.clientHeight); //220

                /*
                4.元素.offsetWidth（只读）和 元素.offsetHeight（只读）：
                    获取元素可见框的宽度和高度（包括内容区、内边距和边框） 
                    (注意：只是获取数值，不带单位px) 
                 */ 
                    console.log(box1.offsetWidth);  //530
                    console.log(box1.offsetHeight); //230 

                /*
                5.子元素.offsetParent （只读）：
                    获取离当前元素最近的开启了定位的祖先元素，
                    如果所有的祖先元素都没开启定位，则返回body
                  子元素.offsetTop（只读）和 子元素.offsetLeft（只读）：
                    获取当前元素相对于其定位父元素的水平和垂直偏移量；  
                 */    
                    console.log(box1.offsetParent.id); //box3
                    console.log(box1.offsetLeft);      //15
                    console.log(box1.offsetTop);       //30

                /*
                6.元素.scrollWidth(只读) 和 元素.scrollHeight(只读)：
                    获取元素的整个滚动区域的宽度和滚动高度;
                  元素.scrollLeft(只读) 和 元素.scrollTop(只读)：
                    获取水平和垂直滚动条滚动的距离；
                 */    
                    console.log(box4.scrollHeight);    //800
                    console.log(box4.scrollWidth);    //600.
                    console.log(box4.scrollLeft); //0--> 46 --> 115(随水平滚动条变化)
                    console.log(box4.scrollTop);  //0--> 90 --> 209(随垂直滚动条变化)

                /* (小技巧)
                  当满足scrollHeight - scrollTop == clientHeight 时，说明垂直滚动条已经到底了； 
                  当满足scrollWidth - scrollLeft == clientWidth 时，说明水平滚动条已经到底了； 
                 */    
                    console.log(box4.clientHeight);  //383
                    console.log(box4.scrollHeight - box4.scrollTop);//800 --> 721 --> 586 --> 383
                }

            };
            
        </script>
        <style type="text/css">
            body{
                height: 1500px;
            }
            #box1{
                width: 500px;
                height: 200px;
                padding: 10px;
                border: 5px solid red;
                background-color: yellow;
                position: absolute;
                left: 15px;
                top: 30px;
            }
            #box3{
                margin-bottom: 300px;
            }
            #box4{
                width: 300px;
                height: 400px;
                background-color: yellowgreen;
                overflow: auto;
            }
            #box5{
                width: 600px;
                height: 800px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <button id="btn01">01点击一下</button>
        <button id="btn02">02点击一下</button>
        <button id="btn03">03点击一下</button>
        <br><br>

        <div id="box3" style="position: relative;">
            <div id="box2">
                <div id="box1"></div>
            </div>
        </div>

        <div id="box4">
            <div id="box5"></div>
        </div>
    </body>
</html>